import React, { useState } from 'react';
import { Card, Form, Input, Switch, Button, Select, Divider, message, Row, Col, Space } from 'antd';
import { SaveOutlined, ReloadOutlined } from '@ant-design/icons';

const { Option } = Select;
const { TextArea } = Input;

const SystemSettings: React.FC = () => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  const onFinish = async (values: any) => {
    setLoading(true);
    try {
      // 模拟保存设置
      await new Promise(resolve => setTimeout(resolve, 1000));
      console.log('保存设置:', values);
      message.success('系统设置保存成功');
    } catch (error) {
      message.error('保存失败');
    } finally {
      setLoading(false);
    }
  };

  const loadDefaultSettings = () => {
    form.setFieldsValue({
      siteName: '后台管理系统',
      siteDescription: '基于 React + TypeScript 的后台管理系统',
      enableRegistration: true,
      enableNotification: true,
      theme: 'light',
      language: 'zh-CN',
      smtpHost: 'smtp.example.com',
      smtpPort: 587,
      footerText: '© 2024 后台管理系统',
      maintenanceMode: false,
    });
  };

  return (
    <div>
      <Card title="系统设置">
        <Form
          form={form}
          layout="vertical"
          onFinish={onFinish}
          initialValues={{
            theme: 'light',
            language: 'zh-CN',
          }}
        >
          <Row gutter={32}>
            <Col span={12}>
              <Card title="基本设置" size="small" style={{ marginBottom: 24 }}>
                <Form.Item
                  label="站点名称"
                  name="siteName"
                  rules={[{ required: true, message: '请输入站点名称' }]}
                >
                  <Input placeholder="请输入站点名称" />
                </Form.Item>

                <Form.Item
                  label="站点描述"
                  name="siteDescription"
                >
                  <TextArea rows={3} placeholder="请输入站点描述" />
                </Form.Item>

                <Form.Item
                  label="页脚文本"
                  name="footerText"
                >
                  <Input placeholder="请输入页脚文本" />
                </Form.Item>
              </Card>

              <Card title="功能设置" size="small" style={{ marginBottom: 24 }}>
                <Form.Item
                  label="允许用户注册"
                  name="enableRegistration"
                  valuePropName="checked"
                >
                  <Switch />
                </Form.Item>

                <Form.Item
                  label="启用通知"
                  name="enableNotification"
                  valuePropName="checked"
                >
                  <Switch />
                </Form.Item>

                <Form.Item
                  label="维护模式"
                  name="maintenanceMode"
                  valuePropName="checked"
                >
                  <Switch />
                </Form.Item>
              </Card>
            </Col>

            <Col span={12}>
              <Card title="界面设置" size="small" style={{ marginBottom: 24 }}>
                <Form.Item
                  label="主题"
                  name="theme"
                >
                  <Select>
                    <Option value="light">浅色主题</Option>
                    <Option value="dark">深色主题</Option>
                    <Option value="auto">跟随系统</Option>
                  </Select>
                </Form.Item>

                <Form.Item
                  label="语言"
                  name="language"
                >
                  <Select>
                    <Option value="zh-CN">简体中文</Option>
                    <Option value="en-US">English</Option>
                    <Option value="ja-JP">日本語</Option>
                  </Select>
                </Form.Item>
              </Card>

              <Card title="邮件设置" size="small">
                <Form.Item
                  label="SMTP 服务器"
                  name="smtpHost"
                >
                  <Input placeholder="smtp.example.com" />
                </Form.Item>

                <Form.Item
                  label="SMTP 端口"
                  name="smtpPort"
                >
                  <Input type="number" placeholder="587" />
                </Form.Item>

                <Form.Item
                  label="发件人邮箱"
                  name="smtpFrom"
                >
                  <Input placeholder="noreply@example.com" />
                </Form.Item>
              </Card>
            </Col>
          </Row>

          <Divider />

          <Form.Item>
            <Space>
              <Button 
                type="primary" 
                htmlType="submit" 
                loading={loading}
                icon={<SaveOutlined />}
              >
                保存设置
              </Button>
              <Button 
                onClick={loadDefaultSettings}
                icon={<ReloadOutlined />}
              >
                加载默认值
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
};

export default SystemSettings;